<!-- 商品中心 - 商品列表  -->
<template>
<!--  <doc-alert title="【商品】商品 SPU 与 SKU" url="https://doc.iocoder.cn/mall/product-spu-sku/" />-->

  <!-- 搜索工作栏 -->
  <ContentWrap>
    <el-form
      ref="queryFormRef"
      :inline="true"
      :model="queryParams"
      class="-mb-15px"
      label-width="68px"
    >
      <el-form-item label="商品名称" prop="name">
        <el-input
          v-model="queryParams.name"
          class="!w-240px"
          clearable
          placeholder="请输入商品名称"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="商品分类" prop="categoryId">
        <el-select
          v-model="queryParams.categoryId"
          clearable
          filterable
          placeholder="请选择商品分类"
          style="width: 160px"
        >
          <el-option
            v-for="category in childCategoryOptions"
            :key="category.value"
            :label="category.label"
            :value="category.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <div>
          <el-date-picker
            v-model="queryParams.createTime"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
            class="!w-240px"
            end-placeholder="结束日期"
            start-placeholder="开始日期"
            type="daterange"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
          <div
            v-if="queryParams.createTime && !queryParams.categoryId"
            style="font-size: 12px; color: #909399; margin-top: 4px;"
          >
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
          <Icon class="mr-5px" icon="ep:search" />
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon class="mr-5px" icon="ep:refresh" />
          重置
        </el-button>
        <el-button @click="handleRefresh" :loading="loading">
          <Icon class="mr-5px" icon="ep:refresh-right" />
          刷新数据
        </el-button>
        <el-button
          v-hasPermi="['product:spu:create']"
          plain
          type="primary"
          @click="openForm(undefined)"
        >
          <Icon class="mr-5px" icon="ep:plus" />
          新增
        </el-button>
        <el-button
          v-hasPermi="['product:spu:export']"
          :loading="exportLoading"
          plain
          type="success"
          @click="handleExport"
        >
          <Icon class="mr-5px" icon="ep:download" />
          导出
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-tabs v-model="queryParams.tabType" @tab-click="handleTabClick">
      <el-tab-pane
        v-for="item in tabsData"
        :key="item.type"
        :label="item.name + '(' + item.count + ')'"
        :name="item.type"
      />
    </el-tabs>
    <el-table v-loading="loading" :data="list">
      <el-table-column type="expand">
        <template #default="{ row }">
          <el-form class="spu-table-expand" label-position="left">
            <el-row>
              <el-col :span="24">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="商品分类:">
                      <span>{{ formatCategoryName(row.categoryId) }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="市场价:">
                      <span>{{ fenToYuan(row.marketPrice) }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="成本价:">
                      <span>{{ fenToYuan(row.costPrice) }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="浏览量:">
                      <span>{{ row.browseCount }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="虚拟销量:">
                      <span>{{ row.virtualSalesCount }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="商品编号" min-width="140" prop="id" />
      <el-table-column label="商品信息" min-width="300">
        <template #default="{ row }">
          <div class="flex">
            <el-image
              fit="cover"
              :src="row.picUrl"
              class="flex-none w-50px h-50px"
              @click="imagePreview(row.picUrl)"
            />
            <div class="ml-4 overflow-hidden">
              <el-tooltip effect="dark" :content="row.name" placement="top">
                <div>
                  {{ row.name }}
                </div>
              </el-tooltip>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="商品分类" min-width="120" prop="categoryId">
        <template #default="{ row }">
          <el-tag :type="getCategoryTagType(row.categoryId)" size="small">
            {{ getCategoryName(row.categoryId) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="价格" min-width="160" prop="price">
        <template #default="{ row }"> ¥ {{ fenToYuan(row.price) }}</template>
      </el-table-column>
      <el-table-column align="center" label="销量" min-width="90" prop="salesCount" />
      <el-table-column align="center" label="库存" min-width="90" prop="stock" />
      <el-table-column align="center" label="排序" min-width="70" prop="sort" />
      <el-table-column align="center" label="销售状态" min-width="80">
        <template #default="{ row }">
          <template v-if="row.status >= 0">
            <el-switch
              v-model="row.status"
              :active-value="1"
              :inactive-value="0"
              active-text="上架"
              inactive-text="下架"
              inline-prompt
              @change="handleStatusChange(row)"
            />
          </template>
          <template v-else>
            <el-tag type="info">回收站</el-tag>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        :formatter="dateFormatter"
        align="center"
        label="创建时间"
        prop="createTime"
        width="180"
      />
      <el-table-column align="center" fixed="right" label="操作" min-width="200">
        <template #default="{ row }">
          <el-button link type="primary" @click="openDetail(row.id)"> 详情 </el-button>
          <el-button
            v-hasPermi="['product:spu:update']"
            link
            type="primary"
            @click="openForm(row.id)"
          >
            修改
          </el-button>
          <template v-if="queryParams.tabType === 4">
            <el-button
              v-hasPermi="['product:spu:delete']"
              link
              type="danger"
              @click="handleDelete(row.id)"
            >
              删除
            </el-button>
            <el-button
              v-hasPermi="['product:spu:update']"
              link
              type="primary"
              @click="handleStatus02Change(row, ProductSpuStatusEnum.DISABLE.status)"
            >
              恢复
            </el-button>
          </template>
          <template v-else>
            <el-button
              v-hasPermi="['product:spu:update']"
              link
              type="danger"
              @click="handleStatus02Change(row, ProductSpuStatusEnum.RECYCLE.status)"
            >
              回收
            </el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      v-model:limit="queryParams.pageSize"
      v-model:page="queryParams.pageNo"
      :total="total"
      @pagination="getList"
    />
  </ContentWrap>
</template>
<script lang="ts" setup>
import { TabsPaneContext } from 'element-plus'
import { createImageViewer } from '@/components/ImageViewer'
import { dateFormatter } from '@/utils/formatTime'
import { handleTree, treeToString } from '@/utils/tree'
import { ProductSpuStatusEnum } from '@/utils/constants'
import { fenToYuan } from '@/utils'
import download from '@/utils/download'
import * as ProductSpuApi from '@/api/mall/product/carrent'
import * as ProductCategoryApi from '@/api/mall/product/category'

defineOptions({ name: 'ProductCoach' })

const message = useMessage() // 消息弹窗
const route = useRoute() // 路由
const { t } = useI18n() // 国际化
const { push } = useRouter() // 路由跳转

const loading = ref(false) // 列表的加载中
const exportLoading = ref(false) // 导出的加载中
const total = ref(0) // 列表的总页数
const list = ref<ProductSpuApi.Spu[]>([]) // 列表的数据
// tabs 数据
const tabsData = ref([
  {
    name: '出售中',
    type: 0,
    count: 0
  },
  {
    name: '仓库中',
    type: 1,
    count: 0
  },
  {
    name: '已售罄',
    type: 2,
    count: 0
  },
  {
    name: '警戒库存',
    type: 3,
    count: 0
  },
  
  {
    name: '回收站',
    type: 4,
    count: 0
  }
])

const queryParams = ref({
  pageNo: 1,
  pageSize: 10,
  tabType: 0,
  name: '',
  categoryId: undefined as number | undefined,
  createTime: undefined
}) // 查询参数
const queryFormRef = ref() // 搜索的表单Ref

// 缓存所有教练车商品数据，避免重复请求
let allVehicleProducts: any[] = []

// 父分类ID - 驾校服务
const PARENT_CATEGORY_ID = 87

// 期望的子分类ID列表
const EXPECTED_CHILD_CATEGORY_IDS = [88, 89, 90,91]

/**
 * 获取指定父分类下的所有子分类ID（不包含父分类本身）
 * @param parentId 父分类ID
 * @param categories 分类列表
 * @returns 只包含子分类的ID数组
 */
const getChildCategoryIds = (parentId: number, categories: any[]): number[] => {
  const childCategoryIds: number[] = []

  console.log(`开始查找父分类 ${parentId} 下的子分类...`)

  categories.forEach(category => {
    if (category.parentId === parentId) {
      childCategoryIds.push(category.id)
      console.log(`✓ 找到子分类: [${category.id}] ${category.name} (parentId: ${category.parentId})`)

      // 递归查找子分类的子分类
      const grandChildren = getChildCategoryIds(category.id, categories)
      childCategoryIds.push(...grandChildren)
    }
  })

  console.log(`父分类 ${parentId} 下的所有子分类ID:`, childCategoryIds)

  // 确保包含预期的分类ID：88、89、90
  const expectedIds = [88, 89, 90,91]
  const missingIds = expectedIds.filter(id => !childCategoryIds.includes(id))
  if (missingIds.length > 0) {
    console.warn(`⚠️ 缺少预期的子分类ID: ${missingIds.join(', ')}`)
    console.log('请检查这些分类是否存在且parentId=87')
  }

  return childCategoryIds
}

/**
 * 获取目标分类ID列表（优先动态获取，失败则使用硬编码）
 * @param categories 分类列表
 * @returns 目标分类ID数组
 */
const getTargetCategoryIds = (categories: any[]): number[] => {
  // 首先尝试动态获取
  const dynamicIds = getChildCategoryIds(PARENT_CATEGORY_ID, categories)

  // 如果动态获取成功且包含期望的分类，使用动态结果
  if (dynamicIds.length > 0) {
    const hasExpectedIds = EXPECTED_CHILD_CATEGORY_IDS.some(id => dynamicIds.includes(id))
    if (hasExpectedIds) {
      console.log('✓ 使用动态获取的分类ID:', dynamicIds)
      return dynamicIds
    }
  }

  // 否则使用硬编码的分类ID
  console.log('⚠️ 动态获取失败，使用硬编码的分类ID:', EXPECTED_CHILD_CATEGORY_IDS)
  return EXPECTED_CHILD_CATEGORY_IDS
}

/**
 * 调试用：打印分类层级结构
 * @param categories 分类列表
 * @param parentId 父分类ID
 * @param level 层级深度
 */
const printCategoryTree = (categories: any[], parentId: number = 0, level: number = 0) => {
  const indent = '  '.repeat(level)
  categories.forEach(category => {
    if (category.parentId === parentId) {
      console.log(`${indent}├─ [${category.id}] ${category.name}`)
      printCategoryTree(categories, category.id, level + 1)
    }
  })
}

/**
 * 检查指定分类是否存在
 * @param categories 分类列表
 * @param categoryId 要检查的分类ID
 */
const checkCategoryExists = (categories: any[], categoryId: number) => {
  const category = categories.find(cat => cat.id === categoryId)
  if (category) {
    console.log(`✓ 找到分类 [${categoryId}]: ${category.name}`)
    console.log(`  父分类ID: ${category.parentId}`)
    console.log(`  状态: ${category.status}`)
    return true
  } else {
    console.error(`✗ 未找到分类 [${categoryId}]`)
    console.log('现有分类列表:')
    categories.forEach(cat => {
      console.log(`  [${cat.id}] ${cat.name} (parentId: ${cat.parentId})`)
    })
    return false
  }
}

/**
 * 根据分类ID获取分类名称
 * @param categoryId 分类ID
 * @returns 分类名称
 */
const getCategoryName = (categoryId: number): string => {
  if (!categoryId) {
    return '未知分类'
  }

  // 预定义的分类映射（确保能正确显示）
  const categoryMap: Record<number, string> = {
    87: '驾校服务',
    88: '科目一',
    89: '科目二',
    90: '科目三',
    // 可以根据需要添加更多分类
    91: '科目四',
    92: '理论考试',
    93: '实操考试'
  }

  // 优先使用预定义的映射
  if (categoryMap[categoryId]) {
    return categoryMap[categoryId]
  }

  // 如果分类列表已加载，从中查找
  if (categoryList.value && categoryList.value.length > 0) {
    const category = findCategoryInTree(categoryList.value, categoryId)
    if (category) {
      return category.name
    }
  }

  // 在原始分类数据中查找
  if (rawCategoryData.value && rawCategoryData.value.length > 0) {
    const category = rawCategoryData.value.find(cat => cat.id === categoryId)
    if (category) {
      return category.name
    }
  }

  // 最后的备用方案
  return `分类${categoryId}`
}

/**
 * 在分类树中查找指定ID的分类
 * @param categories 分类树
 * @param categoryId 要查找的分类ID
 * @returns 找到的分类对象或null
 */
const findCategoryInTree = (categories: any[], categoryId: number): any => {
  for (const category of categories) {
    if (category.id === categoryId) {
      return category
    }
    // 如果有子分类，递归查找
    if (category.children && category.children.length > 0) {
      const found = findCategoryInTree(category.children, categoryId)
      if (found) return found
    }
  }
  return null
}

/**
 * 根据分类ID获取标签类型（用于不同颜色显示）
 * @param categoryId 分类ID
 * @returns 标签类型
 */
const getCategoryTagType = (categoryId: number): 'success' | 'warning' | 'info' | 'primary' | 'danger' => {
  const tagTypeMap: Record<number, 'success' | 'warning' | 'info' | 'primary' | 'danger'> = {
    87: 'info',      // 驾校服务 - 灰色
    88: 'success',   // 科目一 - 绿色
    89: 'warning',   // 科目二 - 橙色
    90: 'danger',    // 科目三 - 红色
    91: 'primary',   // 科目四 - 蓝色
    92: 'info',      // 理论考试 - 灰色
    93: 'success'    // 实操考试 - 绿色
  }

  return tagTypeMap[categoryId] || 'info'
}

/**
 * 获取分类的排序优先级
 * @param categoryId 分类ID
 * @returns 排序优先级（数字越小优先级越高）
 */
const getCategorySortOrder = (categoryId: number): number => {
  const sortOrderMap: Record<number, number> = {
    88: 1,  // 科目一 - 最高优先级
    89: 2,  // 科目二 - 第二优先级
    90: 3,  // 科目三 - 第三优先级
    87: 4,  // 驾校服务 - 较低优先级
    91: 5,  // 科目四 - 更低优先级
    92: 6,  // 理论考试
    93: 7   // 实操考试
  }

  // 如果分类ID不在映射中，返回较大的数字（低优先级）
  return sortOrderMap[categoryId] || 999
}

/**
 * 对商品列表按分类进行排序
 * @param products 商品列表
 * @returns 排序后的商品列表
 */
const sortProductsByCategory = (products: any[]): any[] => {
  return products.sort((a, b) => {
    const orderA = getCategorySortOrder(a.categoryId)
    const orderB = getCategorySortOrder(b.categoryId)

    // 首先按分类排序
    if (orderA !== orderB) {
      return orderA - orderB
    }

    // 如果分类相同，按商品ID排序（保持稳定排序）
    return a.id - b.id
  })
}

/**
 * 强制更新缓存数据（在商品操作后调用）
 */
const forceUpdateCache = async () => {
  try {
    console.log('=== 强制更新缓存数据 ===')

    // 分批获取所有商品数据
    let allProducts: any[] = []
    let pageNo = 1
    const pageSize = 100

    while (true) {
      const data = await ProductSpuApi.getSpuPage({ pageNo, pageSize })
      if (data && data.list && data.list.length > 0) {
        allProducts = allProducts.concat(data.list)
        if (data.list.length < pageSize) {
          break
        }
        pageNo++
      } else {
        break
      }
    }

    // 获取目标分类ID（88、89、90）- 使用原始分类数据而不是过滤后的数据
    const childCategoryIds = getTargetCategoryIds(rawCategoryData.value || [])
    console.log('父分类87下的子分类ID:', childCategoryIds)

    // 更新缓存 - 只显示父分类87下的子分类商品（不包含父分类本身）
    const filteredProducts = allProducts.filter((spu: any) => childCategoryIds.includes(spu.categoryId))

    // 按分类排序后更新缓存
    allVehicleProducts = sortProductsByCategory(filteredProducts)

    console.log('缓存已更新，总商品数量:', allProducts.length)
    console.log('驾校服务子分类商品数量:', allVehicleProducts.length)
    console.log('商品按分类排序完成（科目一 → 科目二 → 科目三）')
    console.log('缓存已更新，总商品数量:', allProducts.length)
    console.log('教练车商品数量（父分类87下的子分类）:', allVehicleProducts.length)

    // 重新计算tabs统计
    calculateTabsCount(allVehicleProducts)
  } catch (error) {
    console.error('强制更新缓存失败:', error)
  }
}

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    // 构建查询参数，自动处理创建时间查询时的分类筛选
    const searchParams = buildSearchParams(queryParams.value)

    console.log('正在获取商品列表，查询参数:', searchParams)
    const data = await ProductSpuApi.getSpuPage(searchParams)
    console.log('API返回的数据:', data)

    if (data && data.list) {
      // 判断是否有条件查询（除了tabType之外的查询条件）
      const hasSearchConditions = queryParams.value.name || queryParams.value.categoryId || queryParams.value.createTime

      let vehicleProducts: any[]

      if (hasSearchConditions) {
        console.log('🔍 检测到条件查询，直接使用API返回的数据')
        console.log('查询条件:', {
          name: queryParams.value.name,
          categoryId: queryParams.value.categoryId,
          createTime: queryParams.value.createTime
        })

        // 有条件查询时，处理数据
        let filteredData = data.list

        // 如果是创建时间查询且没有指定分类，需要在前端进行科目分类过滤（备用方案）
        if (queryParams.value.createTime && !queryParams.value.categoryId) {
          const targetCategoryIds = [88, 89, 90, 91]
          filteredData = data.list.filter((spu: any) => targetCategoryIds.includes(spu.categoryId))
          console.log('🔧 前端备用过滤：从', data.list.length, '条数据中筛选出', filteredData.length, '条科目数据')
        }

        vehicleProducts = sortProductsByCategory(filteredData)
      } else {
        console.log('📋 无条件查询，进行分类过滤')

        // 获取目标分类ID（88、89、90）- 使用原始分类数据而不是过滤后的数据
        const childCategoryIds = getTargetCategoryIds(rawCategoryData.value || [])

        // 验证是否获取到了有效的分类ID
        if (childCategoryIds.length === 0) {
          console.error('❌ 未获取到有效的子分类ID，可能导致数据无法正确过滤')
          console.log('原始分类数据数量:', rawCategoryData.value.length)
          console.log('过滤后分类数据数量:', categoryList.value?.length || 0)
        }

        // 过滤只显示父分类87下的子分类商品（不包含父分类本身）
        const filteredProducts = data.list.filter((spu: any) => childCategoryIds.includes(spu.categoryId))

        // 按分类排序：科目一、科目二、科目三
        vehicleProducts = sortProductsByCategory(filteredProducts)
      }

      // 如果缓存为空，则更新缓存（初始化时）
      if (allVehicleProducts.length === 0) {
        allVehicleProducts = vehicleProducts
        console.log('初始化缓存数据')
      }

      console.log('=== getList 调试信息 ===')
      console.log('API返回的原始数据数量:', data.list.length)
      console.log('使用的分类数据源:', rawCategoryData.value.length > 0 ? '原始分类数据' : '过滤后分类数据')
      console.log('是否有条件查询:', hasSearchConditions)
      console.log('期望的子分类ID: [88, 89, 90,91]')
      console.log('处理后的商品数量:', vehicleProducts.length)

      // 显示所有商品的分类ID分布
      const categoryDistribution = {}
      data.list.forEach(spu => {
        categoryDistribution[spu.categoryId] = (categoryDistribution[spu.categoryId] || 0) + 1
      })
      console.log('所有商品的分类ID分布:', categoryDistribution)

      // 显示匹配的商品详情（包含分类名称和排序信息）
      console.log('匹配的驾校服务商品详情（已按分类排序）:', vehicleProducts.map((spu: any, index: number) => ({
        排序位置: index + 1,
        id: spu.id,
        name: spu.name,
        categoryId: spu.categoryId,
        categoryName: getCategoryName(spu.categoryId),
        sortOrder: getCategorySortOrder(spu.categoryId),
        status: spu.status,
        stock: spu.stock
      })))

      // 显示分类排序统计
      const categoryStats = vehicleProducts.reduce((stats: any, spu: any) => {
        const categoryName = getCategoryName(spu.categoryId)
        stats[categoryName] = (stats[categoryName] || 0) + 1
        return stats
      }, {})
      console.log('📊 分类商品统计（按排序）:', categoryStats)

      // 如果没有匹配的商品，显示可能的原因
      if (vehicleProducts.length === 0) {
        console.warn('⚠️ 没有找到匹配的驾校服务商品，可能的原因：')
        console.warn('1. 数据库中没有分类ID为88、89、90的商品')
        console.warn('2. 商品的categoryId字段值不正确')
        console.warn('3. 需要创建分类ID为88、89、90的商品')
        console.warn('期望的子分类: [88]科目一, [89]科目二, [90]科目三')
      }

      // 根据当前选中的tab类型过滤显示的商品
      const tabType = queryParams.value.tabType
      console.log('当前tab类型:', tabType)

      if (hasSearchConditions) {
        console.log('检测到条件查询，使用API返回的数据:', vehicleProducts.length)
        console.log('查询条件:', {
          name: queryParams.value.name,
          categoryId: queryParams.value.categoryId,
          createTime: queryParams.value.createTime
        })

        // 有条件查询时，直接使用API返回的过滤后数据，再根据tab类型过滤
        const filteredList = vehicleProducts.filter((spu: any) => {
          switch (tabType) {
            case 0: // 出售中
              return spu.status === 1 && spu.stock > 0
            case 1: // 仓库中
              return spu.status === 0
            case 2: // 已售罄
              return spu.status === 1 && spu.stock <= 0
            case 3: // 警戒库存
              return spu.stock <= 5 && spu.stock > 0
            case 4: // 回收站
              return spu.status === -1
            default:
              return true
          }
        })

        list.value = filteredList
        total.value = data.total || filteredList.length

        console.log('条件查询结果 - 过滤前:', vehicleProducts.length)
        console.log('条件查询结果 - 过滤后:', filteredList.length)
      } else {
        console.log('无条件查询，使用缓存数据进行过滤，缓存商品数量:', allVehicleProducts.length)

        // 无条件查询时，使用缓存数据进行tab过滤
        const filteredList = allVehicleProducts.filter((spu: any) => {
          switch (tabType) {
            case 0: // 出售中
              return spu.status === 1 && spu.stock > 0
            case 1: // 仓库中
              return spu.status === 0
            case 2: // 已售罄
              return spu.status === 1 && spu.stock <= 0
            case 3: // 警戒库存
              return spu.stock <= 5 && spu.stock > 0
            case 4: // 回收站
              const isRecycled = spu.status === -1
              console.log('检查回收站商品:', {
                id: spu.id,
                name: spu.name,
                status: spu.status,
                categoryId: spu.categoryId,
                是否为回收状态: isRecycled
              })
              return isRecycled
            default:
              return true
          }
        })

        list.value = filteredList
        total.value = filteredList.length

        console.log('过滤后显示的商品数量:', filteredList.length)
        console.log('过滤后的商品列表:', filteredList.map((spu: any) => ({
          id: spu.id,
          name: spu.name,
          status: spu.status
        })))
      }

      console.log('=== getList 调试信息结束 ===')
    } else {
      console.warn('API返回空数据')
      list.value = []
      total.value = 0
      // 重置缓存和tabs统计
      allVehicleProducts = []
      tabsData.value.forEach(tab => {
        tab.count = 0
      })
    }
  } catch (error) {
    console.error('获取商品列表失败:', error)
    message.error('获取商品列表失败: ' + (error as Error).message)
    list.value = []
    total.value = 0
  } finally {
    loading.value = false
  }
}

/** 切换 Tab */
const handleTabClick = (tab: TabsPaneContext) => {
  queryParams.value.tabType = tab.paneName as number
  getList()
}

/**
 * 根据驾校服务商品计算各个Tab的数量
 * @param vehicleProducts 驾校服务商品列表（科目一、科目二等）
 */
const calculateTabsCount = (vehicleProducts: any[]) => {
  // 重置所有tab的计数
  tabsData.value.forEach(tab => {
    tab.count = 0
  })

  // 统计各个状态的商品数量
  vehicleProducts.forEach((spu: any) => {
    // 根据商品状态和库存情况分类统计
    if (spu.status === 1) { // 上架状态
      if (spu.stock > 0) {
        tabsData.value[0].count++ // 出售中
      } else {
        tabsData.value[2].count++ // 已售罄
      }
    } else if (spu.status === 0) { // 下架状态
      tabsData.value[1].count++ // 仓库中
    } else if (spu.status === -1) { // 回收站状态
      tabsData.value[4].count++ // 回收站
    }

    // 警戒库存的判断（假设库存小于等于5为警戒库存）
    if (spu.stock <= 5 && spu.stock > 0) {
      tabsData.value[3].count++ // 警戒库存
    }
  })

  console.log('驾校服务商品统计:', {
    总数: vehicleProducts.length,
    出售中: tabsData.value[0].count,
    仓库中: tabsData.value[1].count,
    已售罄: tabsData.value[2].count,
    警戒库存: tabsData.value[3].count,
    回收站: tabsData.value[4].count
  })
}

/**
 * 刷新tabs统计数据（重新从服务器获取数据）
 */
const refreshTabsCount = async () => {
  try {
    // 分批获取所有商品数据来进行统计（避免超过pageSize限制）
    let allProducts: any[] = []
    let pageNo = 1
    const pageSize = 100 // 使用最大允许的页面大小

    while (true) {
      const data = await ProductSpuApi.getSpuPage({ pageNo, pageSize })
      if (data && data.list && data.list.length > 0) {
        allProducts = allProducts.concat(data.list)
        // 如果返回的数据少于pageSize，说明已经是最后一页
        if (data.list.length < pageSize) {
          break
        }
        pageNo++
      } else {
        break
      }
    }

    if (allProducts.length > 0) {
      // 获取目标分类ID（88、89、90）- 使用原始分类数据而不是过滤后的数据
      const childCategoryIds = getTargetCategoryIds(rawCategoryData.value || [])

      // 过滤出父分类87下的子分类商品并缓存（不包含父分类本身）
      const filteredProducts = allProducts.filter((spu: any) => childCategoryIds.includes(spu.categoryId))

      // 按分类排序后更新缓存
      allVehicleProducts = sortProductsByCategory(filteredProducts)

      console.log('=== 刷新tabs统计数据 ===')
      console.log('所有商品数量:', allProducts.length)
      console.log('驾校服务(87)的子分类ID:', childCategoryIds)
      console.log('驾校服务商品数量:', allVehicleProducts.length)
      console.log('驾校服务商品详情:', allVehicleProducts.map((spu: any) => ({
        id: spu.id,
        name: spu.name,
        status: spu.status,
        categoryId: spu.categoryId
      })))

      // 计算tabs数量
      calculateTabsCount(allVehicleProducts)
    }
  } catch (error) {
    console.error('刷新tabs统计数据失败:', error)
    // 如果出错，重置所有计数为0
    tabsData.value.forEach(tab => {
      tab.count = 0
    })
  }
}

/** 添加到仓库 / 回收站的状态 */
const handleStatus02Change = async (row: any, newStatus: number) => {
  try {
    // 二次确认
    const text = newStatus === ProductSpuStatusEnum.RECYCLE.status ? '加入到回收站' : '恢复到仓库'
    await message.confirm(`确认要"${row.name}"${text}吗？`)
    // 发起修改
    await ProductSpuApi.updateStatus({ id: row.id, status: newStatus })
    message.success(text + '成功')

    console.log('=== 回收操作完成，开始刷新数据 ===')
    // 强制更新缓存和tabs统计
    await forceUpdateCache()
    // 刷新当前显示的列表
    await getList()
    console.log('=== 数据刷新完成 ===')
  } catch {}
}

/** 更新上架/下架状态 */
const handleStatusChange = async (row: any) => {
  try {
    // 二次确认
    const text = row.status ? '上架' : '下架'
    await message.confirm(`确认要${text}"${row.name}"吗？`)
    // 发起修改
    await ProductSpuApi.updateStatus({ id: row.id, status: row.status })
    message.success(text + '成功')
    // 强制更新缓存和tabs统计
    await forceUpdateCache()
    // 刷新当前显示的列表
    await getList()
  } catch {
    // 异常时，需要重置回之前的值
    row.status =
      row.status === ProductSpuStatusEnum.DISABLE.status
        ? ProductSpuStatusEnum.ENABLE.status
        : ProductSpuStatusEnum.DISABLE.status
  }
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await ProductSpuApi.deleteSpu(id)
    message.success(t('common.delSuccess'))
    // 强制更新缓存和tabs统计
    await forceUpdateCache()
    // 刷新当前显示的列表
    await getList()
  } catch {}
}

/** 商品图预览 */
const imagePreview = (imgUrl: string) => {
  createImageViewer({
    urlList: [imgUrl]
  })
}

/** 搜索按钮操作 */
const handleQuery = () => {
  console.log('=== 执行搜索 ===')
  console.log('搜索参数:', queryParams.value)

  // 检查是否有条件查询
  const hasConditions = queryParams.value.name || queryParams.value.categoryId || queryParams.value.createTime
  console.log('是否有搜索条件:', hasConditions)

  if (queryParams.value.categoryId) {
    console.log('选择的分类:', getCategoryName(queryParams.value.categoryId))
  }
  if (queryParams.value.name) {
    console.log('搜索的商品名称:', queryParams.value.name)
  }
  if (queryParams.value.createTime) {
    console.log('搜索的创建时间:', queryParams.value.createTime)
    if (!queryParams.value.categoryId) {
      console.log('🕒 创建时间查询将自动筛选科目一、科目二、科目三、科目四的数据')
    }
  }

  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}



/** 手动刷新数据 */
const handleRefresh = async () => {
  console.log('=== 手动刷新数据开始 ===')
  try {
    // 强制更新缓存和统计数据
    await forceUpdateCache()

    // 刷新当前列表
    await getList()

    message.success('数据刷新成功')
    console.log('=== 手动刷新数据完成 ===')
  } catch (error) {
    console.error('手动刷新数据失败:', error)
    message.error('数据刷新失败')
  }
}

/** 新增或修改 */
const openForm = (id?: number) => {
  // 修改
  if (typeof id === 'number') {
    console.log('跳转到编辑页面，商品ID:', id)
    push({ name: 'ProductCoachEdit', params: { id } })
    return
  }
  // 新增
  console.log('跳转到新增页面')
  push({ name: 'ProductCoachAdd' })
}

/** 查看商品详情 */
const openDetail = (id: number) => {
  push({ name: 'ProductCoachDetail', params: { id } })
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await ProductSpuApi.exportSpu(queryParams.value)
    download.excel(data, '商品列表.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}

/** 获取分类的节点的完整结构 */
const categoryList = ref() // 分类树（过滤后只包含驾校服务分类）
const rawCategoryData = ref<any[]>([]) // 原始分类数据（扁平结构）

// 子分类选项（只包含科目一、科目二、科目三、科目四）
const childCategoryOptions = ref<Array<{ label: string; value: number }>>([])

/**
 * 构建查询参数，自动处理创建时间查询时的分类筛选
 * @param originalParams 原始查询参数
 * @returns 处理后的查询参数
 */
const buildSearchParams = (originalParams: any) => {
  const searchParams: any = { ...originalParams }

  // 如果有创建时间条件查询，且没有指定分类ID，则自动添加科目一二三四的分类ID
  if (searchParams.createTime && !searchParams.categoryId) {
    // 科目一、科目二、科目三、科目四的分类ID
    const targetCategoryIds = [88, 89, 90, 91]

    // 尝试多种参数格式，以兼容不同的后端API实现
    searchParams.categoryIds = targetCategoryIds.join(',') // 逗号分隔的字符串格式
    // 也可以尝试数组格式：searchParams.categoryIds = targetCategoryIds

    console.log('🕒 检测到创建时间查询，自动添加科目分类筛选')
    console.log('目标分类ID:', targetCategoryIds)
    console.log('传递给后端的分类参数:', searchParams.categoryIds)
  }

  return searchParams
}

/**
 * 生成子分类选项（只显示二级分类）
 * @param categories 原始分类数据
 */
const generateChildCategoryOptions = (categories: any[]) => {
  const options: Array<{ label: string; value: number }> = []

  // 目标子分类ID和名称映射
  const targetCategories = [
    { id: 88, name: '科目一' },
    { id: 89, name: '科目二' },
    { id: 90, name: '科目三' },
    { id: 91, name: '科目四' }
  ]

  // 从原始数据中查找对应的分类
  targetCategories.forEach(target => {
    const category = categories.find(cat => cat.id === target.id)
    if (category) {
      options.push({
        label: category.name,
        value: category.id
      })
      console.log(`✓ 找到子分类: [${category.id}] ${category.name}`)
    } else {
      // 如果数据库中没有，使用预定义的名称
      options.push({
        label: target.name,
        value: target.id
      })
      console.log(`⚠️ 使用预定义子分类: [${target.id}] ${target.name}`)
    }
  })

  console.log('🎯 生成的子分类选项:', options)

  return options
}

const formatCategoryName = (categoryId: number) => {
  return treeToString(categoryList.value, categoryId)
}

/**
 * 过滤教练车相关的分类（用于搜索条件）
 * 只显示父分类87及其所有子分类
 */
const filterCoachCategoriesForSearch = (categories: any[]): any[] => {
  console.log('🔍 开始过滤搜索条件中的教练车分类，目标父分类ID:', PARENT_CATEGORY_ID)

  const result: any[] = []

  const findCoachCategories = (cats: any[]) => {
    cats.forEach(category => {
      // 如果是父分类87，包含它及其所有子分类
      if (category.id === PARENT_CATEGORY_ID) {
        console.log(`✅ 找到目标父分类: [${category.id}] ${category.name}`)
        console.log(`   子分类数量: ${category.children?.length || 0}`)

        result.push({
          ...category,
          children: category.children || []
        })
      }
      // 递归检查子分类
      else if (category.children && category.children.length > 0) {
        findCoachCategories(category.children)
      }
    })
  }

  findCoachCategories(categories)

  if (result.length === 0) {
    console.warn('⚠️ 搜索条件中未找到教练车分类，请检查分类ID是否正确')
  } else {
    console.log('✅ 搜索条件中的教练车分类过滤完成')
  }

  return result
}

/**
 * 初始化分类数据并验证关键分类
 */
const initCategoryData = async () => {
  try {
    console.log('🔄 开始加载分类数据...')
    const data = await ProductCategoryApi.getCategoryList({})
    rawCategoryData.value = data || []

    // 构建完整的分类树
    const fullCategoryTree = handleTree(data, 'id', 'parentId')

    // 过滤出教练车相关的分类（用于搜索条件）
    categoryList.value = filterCoachCategoriesForSearch(fullCategoryTree)

    // 生成子分类选项（只显示二级分类）
    childCategoryOptions.value = generateChildCategoryOptions(rawCategoryData.value)

    console.log('✅ 分类数据加载完成')
    console.log('原始分类数据数量:', rawCategoryData.value.length)
    console.log('完整分类树数量:', fullCategoryTree.length)
    console.log('过滤后的搜索分类数量:', categoryList.value.length)
    console.log('子分类选项数量:', childCategoryOptions.value.length)
    console.log('子分类选项详情:', childCategoryOptions.value.map(opt => `[${opt.value}] ${opt.label}`).join(', '))

    // 验证关键分类是否存在
    const keyCategories = [87, 88, 89, 90,91]
    console.log('🔍 验证关键分类:')
    keyCategories.forEach(id => {
      const category = rawCategoryData.value.find(cat => cat.id === id)
      if (category) {
        console.log(`  ✅ [${id}] ${category.name} (parentId: ${category.parentId})`)
      } else {
        console.warn(`  ⚠️ 缺少分类 [${id}]`)
      }
    })

    // 显示搜索条件中可用的分类
    console.log('🔍 搜索条件中可用的分类:')
    categoryList.value.forEach(category => {
      console.log(`  父分类: [${category.id}] ${category.name}`)
      if (category.children && category.children.length > 0) {
        category.children.forEach(child => {
          console.log(`    └─ 子分类: [${child.id}] ${child.name}`)
        })
      }
    })

    return true
  } catch (error) {
    console.error('❌ 分类数据加载失败:', error)
    return false
  }
}

/** 激活时 */
onActivated(async () => {
  console.log('=== 页面激活，开始刷新数据 ===')

  // 强制更新缓存和统计数据
  await forceUpdateCache()

  // 刷新当前列表
  await getList()

  console.log('=== 页面激活刷新完成 ===')
})

/** 页面可见性变化时刷新数据 */
const handleVisibilityChange = async () => {
  if (!document.hidden) {
    console.log('=== 页面重新可见，刷新数据 ===')
    await forceUpdateCache()
    await getList()
  }
}

// 监听页面可见性变化（在现有的 onMounted 中添加）

/** 初始化 **/
onMounted(async () => {
  console.log('=== 教练车页面初始化开始 ===')

  // 添加页面可见性监听
  document.addEventListener('visibilitychange', handleVisibilityChange)

  // 解析路由的 categoryId
  if (route.query.categoryId) {
    queryParams.value.categoryId = Number(route.query.categoryId)
  }

  // 初始化分类数据
  const categoryInitSuccess = await initCategoryData()
  if (!categoryInitSuccess) {
    console.error('分类数据初始化失败，可能影响分类显示')
  }

  // 获取原始分类数据用于后续处理
  const data = rawCategoryData.value

  // 检查父分类87是否存在
  console.log('=== 检查父分类87是否存在 ===')
  const categoryExists = checkCategoryExists(data, PARENT_CATEGORY_ID)

  // 打印分类层级结构（调试用）
  console.log('=== 分类层级结构 ===')
  printCategoryTree(data)

  // 获取目标分类ID（88、89、90）
  console.log('=== 开始获取目标分类ID ===')
  const childCategoryIds = getTargetCategoryIds(data || [])
  console.log('最终使用的分类ID:', childCategoryIds)

  if (childCategoryIds.length === 0) {
    console.error('❌ 错误：没有获取到任何目标分类ID')
    console.log('这可能导致页面无法显示任何数据')
  } else {
    console.log(`✅ 成功获取到 ${childCategoryIds.length} 个目标分类ID`)
    console.log('目标分类: [88]科目一, [89]科目二, [90]科目三')

    // 检查是否包含期望的分类
    const expectedIds = [88, 89, 90,91]
    const foundIds = expectedIds.filter(id => childCategoryIds.includes(id))
    const missingIds = expectedIds.filter(id => !childCategoryIds.includes(id))

    console.log(`✓ 包含的目标分类: ${foundIds.join(', ')}`)
    if (missingIds.length > 0) {
      console.warn(`⚠️ 缺少的分类: ${missingIds.join(', ')} (这些分类的商品不会显示)`)
    }

    if (foundIds.length === 3) {
      console.log('🎉 所有目标分类都已找到！')
    }

    // 显示分类名称映射
    console.log('=== 分类名称映射测试 ===')

    // 测试所有预期的分类ID
    const testCategoryIds = [87, 88, 89, 90,91]
    console.log('🧪 测试分类名称映射:')
    testCategoryIds.forEach(id => {
      const name = getCategoryName(id)
      const tagType = getCategoryTagType(id)
      console.log(`  分类${id}: ${name} (标签颜色: ${tagType})`)
    })

    // 显示实际找到的分类
    console.log('=== 实际找到的分类映射 ===')
    childCategoryIds.forEach(id => {
      console.log(`分类${id}: ${getCategoryName(id)}`)
    })

    // 测试排序功能
    console.log('=== 测试分类排序功能 ===')
    const testProducts = [
      { id: 1, categoryId: 90, name: '测试商品-科目三' },
      { id: 2, categoryId: 88, name: '测试商品-科目一' },
      { id: 3, categoryId: 89, name: '测试商品-科目二' },
      { id: 4, categoryId: 88, name: '测试商品-科目一-2' }
    ]

    const sortedTestProducts = sortProductsByCategory([...testProducts])
    console.log('排序前:', testProducts.map(p => `${p.name}(${getCategoryName(p.categoryId)})`))
    console.log('排序后:', sortedTestProducts.map(p => `${p.name}(${getCategoryName(p.categoryId)})`))
    console.log('✅ 排序功能测试完成')
  }

  // 获得商品信息
  console.log('开始获取教练车商品数据...')
  await refreshTabsCount() // 初始化时刷新tabs统计
  await getList()
  console.log('=== 教练车页面初始化完成 ===')
})
</script>
<style lang="scss" scoped>
.spu-table-expand {
  padding-left: 42px;

  :deep(.el-form-item__label) {
    width: 82px;
    font-weight: bold;
    color: #99a9bf;
  }
}
</style>
